<template>
	<view class="post">
		<view class="info">
			<view class="tag">
				<view class="item">
					<u-tag class="item" :text="post.cate.name" type="success" plain icon="tags-fill"></u-tag>
				</view>

				<view class="item">
					<u-tag class="item" :text="post.status_text" type="error" plain icon="tags-fill"></u-tag>
				</view>

				<view class="item">
					<u-tag class="item" v-if="post.collect" text="取消收藏" type="warning" icon="star"
						@click="collection"></u-tag>
					<u-tag class="item" v-else text="收藏" type="warning" plain icon="star" @click="collection"></u-tag>
				</view>
			</view>

			<view class="title">{{ post.title }}</view>

			<view class="author">
				<!-- 头像 -->
				<view class="avatar" @click="ToBus">
					<image mode="aspectFit" v-if="post.business.avatar_text" :src="post.business.avatar_text"></image>
					<image mode="aspectFit" src="/static/avatar.png"></image>
				</view>

				<!-- 昵称 -->
				<view @click="ToBus" class="nickname">{{ post.business.nickname ? post.business.nickname : '匿名用户' }}</view>

				<!-- 发布时间 -->
				<view class="createtime">发布于 {{ post.createtime_text }}</view>

				<view class="follow">
					<!-- 自己不能关注自己 -->
					<u-tag class="item" v-if="fansShow && business.id != post.busid" @click="attention" text="已关注"
						type="success" icon="tags-fill" size="mini"></u-tag>
					<u-tag class="item" v-if="fansShow == false && business.id != post.busid" @click="attention" text="关注"
						type="success" plain icon="tags-fill" size="mini"></u-tag>
				</view>
			</view>

			<!-- 正文内容 -->
			<view class="content">
				<u-parse :content="post.content"></u-parse>
			</view>

			<!-- 宫格布局 -->
			<view class="grid">
				<u-grid :border="true">
					<u-grid-item>
						<u--text type="warning" text="收藏人数" align="center"></u--text>
						<u--text type="warning" :text="`${post.collect_text}人`" align="center"></u--text>
					</u-grid-item>
					<u-grid-item>
						<u--text type="success" text="回答人数" align="center"></u--text>
						<u--text type="success" :text="`${post.comment_text}人`" align="center"></u--text>
					</u-grid-item>
					<u-grid-item>
						<u--text type="error" text="悬赏积分" align="center"></u--text>
						<u--text type="error" :text="post.point" align="center"></u--text>
					</u-grid-item>
				</u-grid>
			</view>

			<u-divider text="分割线" :dot="true"></u-divider>

			<view class="bottom">
				<view class="btn" v-if="post.status == '0'">
					<u-button type="primary" text="我来回答" @click="AnswerToggle"></u-button>
				</view>
				<view class="btn" v-if="business.id == post.busid && post.status == '0'">
					<u-button type="warning" text="修改提问" @click="edit"></u-button>
				</view>
			</view>
		</view>

		<!-- 评论列表 -->
		<comment v-if="refresh" :postid="postid" :pid="0" :show="true" @comChange="comChange" />

		<!-- 回答弹出层 -->
		<u-popup :show="AnswerShow" @close="AnswerShow = false">
			<view class="answer">
				<u-form labelPosition="top" labelWidth="150" :model="comment" :rules="rules" ref="answer">
					<!-- 描述 -->
					<u-form-item label="回答描述：" prop="content" ref="content">
						<u--textarea v-model="comment.content" placeholder="请输入回答描述"></u--textarea>
					</u-form-item>

					<view class="btn">
						<u-button type="primary" text="提交答案" formType="submit" @click="submit"></u-button>
					</view>
				</u-form>
			</view>
		</u-popup>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>

<script>
//引入评论组件
import comment from '@/components/comment/index.vue'

export default {
	components: { comment },
	onLoad(options) {
		var postid = options.postid ? options.postid : 0;
		this.postid = postid

		this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}

		//调用请求数据
		this.PostData()

		this.CommentData()
	},
	onShow() {
		this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}

		//调用请求数据
		this.PostData()

		this.CommentData()

	},
	data() {
		return {
			postid: 0,
			post: {
				cate: {},
				business: {}
			},
			refresh: true,
			comlist: [],
			business: {},
			MenuShow: false,
			AnswerShow: false,
			content: `
					<b>这个是正文内容</b>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
			comment: {
				pid: 0,
				content: '',
			},
			rules: {
				content: {
					type: 'string',
					required: true,
					message: '请填写回答内容',
					trigger: ['blur', 'change']
				},
			},
			fansShow: false
		}
	},
	methods: {
		// 接收子组件传递过来的数据
		comChange(data) {
			// 修改采纳成功后的头部信息样式
			if(data)this.PostData()
		},
		ToBus() {
			uni.$u.route({
				type: 'navigateTo',
				url: '/pages/business/center?accessToBusid=' + this.post.business.id
			})
		},
		async PostData() {
			//组装数据
			var data = {
				postid: this.postid,
			}

			if (this.business.id) {
				data.busid = this.business.id
			}

			var result = await uni.$u.http.post('/post/info', data)

			if (result.code == 0) {
				this.$refs.notice.show({
					type: 'error',
					message: result.msg,
					complete: () => {
						uni.$u.route({
							type: 'navigateBack',
							delta: 1
						})

						return false
					}
				})
				return false
			}

			this.post = result.data
			this.checkAtt()
		},
		async CommentData() {
			//组装数据
			var data = {
				postid: this.postid,
			}

			if (this.business.id) {
				data.busid = this.business.id
			}

			var result = await uni.$u.http.post('/comment/index', data)

			if (result.data) {
				this.comlist = result.data
			}
		},
		async collection() {
			//未登录
			if (!this.business || !this.business.id) {
				this.$refs.notice.show({
					type: 'error',
					message: '请先登录'
				})

				return false
			}

			//组装数据
			var data = {
				postid: this.postid,
				busid: this.business.id
			}

			var result = await uni.$u.http.post('/post/collect', data)

			if (result.code == 0) {
				this.$refs.notice.show({
					type: 'error',
					message: result.msg
				})

				return false
			} else {
				this.$refs.notice.show({
					type: 'success',
					message: result.msg
				})

				this.PostData()
			}
		},
		edit() {
			//做程序的时候，要把add发帖界面复制一份出来修改为edit编辑界面
			uni.$u.route({
				type: 'navigateTo',
				url: `/pages/post/edit?postid=${this.postid}`,
			})
		},
		AnswerToggle() {
			this.AnswerShow = true
			this.comment.pid = 0
		},
		// 关注功能
		async attention() {
			// 两种情况  fansShow 1、未关注  false    2、已关注  true

			if (this.fansShow) {
				/**
				 * 已关注
				 * 将用户id、帖子中的用户id发送给后台
				 * 改变fansShow状态
				 */
				// 组装数据
				var data = {
					busid: this.business.id,
					fansid: this.post.busid
				}
				// 发起请求
				var result = await uni.$u.http.post('/fans/del', data);

				if (result.code == 0) {
					this.$refs.notice.show({
						type: 'error',
						message: result.msg
					})
					return false
				} else {
					this.$refs.notice.show({
						type: 'success',
						message: result.msg
					})
					this.fansShow = result.data.fansStatus;
				}

			} else {
				// 组装数据
				var data = {
					busid: this.business.id,
					fansid: this.post.busid
				}
				// 发起请求
				var result = await uni.$u.http.post('/fans/add', data);
				if (result.code == 0) {
					this.$refs.notice.show({
						type: 'error',
						message: result.msg
					})
					return false
				} else {
					this.$refs.notice.show({
						type: 'success',
						message: result.msg
					})
					this.fansShow = result.data.fansStatus;
				}
			}
		},
		async checkAtt() {
			// 组装数据
			var data = {
				busid: this.business.id,
				fansid: this.post.busid
			}
			// 发起请求
			var result = await uni.$u.http.post('/fans/index', data);
			this.fansShow = result.data.fansStatus;
		},
		submit() {
			//判断是否有通过表单验证
			this.$refs.answer.validate()
				.then(async res => {
					this.AnswerShow = false
					this.$refs.notice.show({
						type: 'success',
						message: '通过表单验证'
					})

					//未登录
					if (!this.business || !this.business.id) {
						this.$refs.notice.show({
							type: 'error',
							message: '请先登录'
						})

						return false
					}

					//组装数据
					var data = {
						pid: 0,
						content: this.comment.content,
						postid: this.postid,
						busid: this.business.id,
					}

					var result = await uni.$u.http.post('/comment/add', data)

					if (result.code == 0) {
						this.$refs.notice.show({
							type: 'error',
							message: result.msg
						})

						return false
					} else {
						this.$refs.notice.show({
							type: 'success',
							message: result.msg
						})

						this.comment.content = ''

						//隐藏掉评论列表
						this.refresh = false

						this.$nextTick(() => {
							this.refresh = true
							this.PostData()
							this.CommentData()
						})

						//调用另一个组件中的方法
						// comment.methods.CommentData()
					}
				})
				.catch(error => {
					this.$refs.notice.show({
						type: 'error',
						message: '效验失败'
					})
				})
		}
	}
}
</script>

<style lang="scss">
.post {
	background: #f4f6f8;
}

.info {
	width: 95%;
	margin: 0 auto;
	margin-bottom: 20px;
	padding: 10px;
	background: #fff;
	box-shadow: 0 0 3px 0 rgba(0, 78, 255, .1);
}

/* 标签 */
.info .tag {
	display: flex;
	margin-bottom: 10px;
}

.info .tag .item {
	margin-right: 5px;
}

/* 标题 */
.info .title {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: .5em;
}

/* 用户信息 */
.author {
	display: flex;
	align-items: center;
	align-content: center;
	color: #999;
	font-size: .8em;
}

.author .avatar {
	width: 2em;
	height: 2em;
	border-radius: 100%;
	overflow: hidden;
	margin-right: 10px;
}

.author .avatar image {
	width: 100%;
	height: 100%;
}

.author .nickname,
.author .createtime {
	margin-right: 10px;
}


/* 详细内容 */
.content {
	margin: 10px 0px;
	overflow: hidden;
}

.content img {
	width: 100%;
	height: 100%;
}

.info .bottom {
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.info .bottom .btn {
	width: 10em;
	margin-right: 15px;
}

.info .bottom .btn:last-of-type {
	margin-right: 0px;
}

/* 评论列表 */
.list {
	width: 97%;
	margin: 0 auto;
}

.list .item {
	width: 91%;
	margin: 0 auto;
	margin-bottom: 5px;
	padding: 15px;
	background: #fff;
	box-shadow: 0 0 3px 0 rgba(0, 78, 255, .1);
}

.list .item .business {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.business .avatar {
	width: 2em;
	height: 2em;
	border-radius: 100%;
	overflow: hidden;
	margin-right: 10px;
	flex-shrink: 0;
}

.business .avatar image {
	width: 100%;
	height: 100%;
}

.business .base {
	width: 90%;
	padding: 5px 10px;
	font-size: .8em;
}

.business .base .name {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.business .base .name .nickname {
	font-weight: bold;
	color: #000;
}

.business .base .name .createtime {
	color: #999;
}

.business .base .desc {
	color: #999;
}

.item .content {
	font-size: .9em;
	color: #303133;
	margin-bottom: 30px;
}

.item .action {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: space-between;
}

.item .action .left {
	display: flex;
}

.item .action .right {
	display: flex;
	align-items: flex-end;
	align-content: flex-end;
	margin-top: 4px;
}

.item .action .tag {
	margin-right: 10px;
}

.item .action .comment {
	display: flex;
	align-content: center;
	align-items: center;
}

/* 弹出菜单 */
.menu .grid {
	margin: 20px 0px;
}

.btn {
	border-radius: 0px;
}

/* 回答内容 */
.answer {
	padding: 20px;
}
</style>